import React, { useState } from 'react';
import { StyleSheet, View, TouchableOpacity, Text, Modal, Image } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';

// ReportedDetail 组件，负责渲染事件详情
const AppealFailure= ({ selectedCard, handleCloseModal }) => {
  return (

    <View

      visible={!!selectedCard}  // 只有 selectedCard 存在时才显示 Modal
      onRequestClose={handleCloseModal}  // 关闭 Modal
      style = {{flex:1}}
    >
      <View style={styles.container}>
      <View style={styles.upperSection}>
        <Text style={[styles.text,{position:'absolute'},{top:10},{left:10}]}>申诉失败信息</Text>
        <Image
          source={{ uri: 'https://via.placeholder.com/200x100' }}
          style={styles.image}
        />
       <Text style={styles.text1}>图片信息提取</Text> 
      </View>
      <View style={styles.lowerSection}>
      <Text style={styles.text}>地图信息</Text> 
      </View>
      <TouchableOpacity style={styles.closeButton} onPress={handleCloseModal}>
        <Ionicons name="close-circle" size={30} color="black" />
      </TouchableOpacity>
      </View>
    </View>

  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#808080', // 灰色背景
  },
  upperSection: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    borderBottomColor: '#666666', // 较深的灰色分隔线
    borderBottomWidth: 2,
   
  },
  lowerSection: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: 'white',
    fontSize: 24,
  },
  text1: {
    color: 'white',
    fontSize: 15,
  },
  closeButton: {
    position: 'absolute',
    top: 10,//离顶部为10
    right: 10,//离右侧为10
    width: 30,
    height: 30,
    borderRadius: 15,
    justifyContent: 'center',//使图标在按钮内居中对齐
    alignItems: 'center',
  },
  image: {
    width: 400,  // 设置图片的宽度
    height: 180, // 设置图片的高度
    marginTop:35,
  },
  
});
export default AppealFailure;